display visibility opacity隐藏元素的区别

2017-03-05

我们都知道隐藏元素通常使用的方法是display: none，不过很明显这不是唯一的一种方式，CSS2的visibility: hidden和CSS3的opacity: 0均可以隐藏元素，那么他们的区别是什么

css         | 是否占据空间 | 是否可以触发事件 | 是否受tab控制

—————– | —–| —- | ——–
display: none | No | No | No
visibility: hidden| Yes | No | No
opacity: 0 | Yes | Yes | Yes

总结一下

  1. opacity: 0其实只是透明度是0，所以看不见，元素本身还在那，他的事件，占据的空间，默认行为都还在
  2. display: none 和 visibility: hidden都是隐藏元素，所以元素的默认行为，绑定的事件均失效
  3. visibility: hidden会占据空间，而且它的子元素如果被设置为visibility: visible，那么这个子元素会单独显示出来
  4. 只有opacity的隐藏才会实现transition的过渡动画

参考链接